iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
Modern Web

菜鳥網頁基礎系列 第 10

菜鳥網頁基礎 DAY10

  • 分享至 

  • xImage
  •  

今天要介紹的是超連結,通常會用到超連結的時候就是我們要從我們的網頁跳到別的網頁。

<body>
  <h1>超連結(a)</h1>
  <h3><a href="">點我會連結到google</a></h3>
</body>

https://ithelp.ithome.com.tw/upload/images/20200920/20129535p8aJbi2Syg.png
點連結後甚麼事情都不會發生,因為連結內沒有網址,他還是空空的,所以不會跳到 google,接下來我要讓他能跳到 google。

<body>
  <h1>超連結(a)</h1>
  <h3><a href="https://www.google.com">點我會連結到google</a></h3>
</body>

我們要把網址打在 href=”網址打在這裡”,這樣就跳到其他網頁了。
https://ithelp.ithome.com.tw/upload/images/20200920/20129535ds7deWM33c.png
點了之後他就跳到 google 了~
https://ithelp.ithome.com.tw/upload/images/20200920/20129535HV1EAHCEvi.png
不過這裡有一個缺點就是,你點了連結後你的網頁就會消失,如果想要再回去原本的網頁就要按回上一頁,所以我們會使用另一種方式叫"另開分頁"。

 <h3><a target="blank" href="https://www.google.com">另開分頁到google</a></h3>

https://ithelp.ithome.com.tw/upload/images/20200920/20129535zINDSiBEfR.png
https://ithelp.ithome.com.tw/upload/images/20200920/20129535KV8Lpih3hZ.png
這種 blank 只會開一個新的分頁不會一直重複開下去,這種 _blank 會一直開重複的分頁

 <h3><a target="_blank" href="https://www.google.com">一直另開新的google分頁</a></h3>

https://ithelp.ithome.com.tw/upload/images/20200920/20129535OJwIGHwyry.png

<h3><a href="./a1.html">點我會到自我介紹</a></h3>

https://ithelp.ithome.com.tw/upload/images/20200920/20129535U9Wi9GERhP.png
我在我的檔案裡面新增了一個 a1.html 的網頁,之後使用連結從 index.html 跳到 a1.hmtl,然後也可以從 a1.html 跳回 index.html。

<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自我介紹</title>
</head>
 
<body>
    <h1><a href="./index.html">回到首頁</a></h1>
</body>
 
</html>

https://ithelp.ithome.com.tw/upload/images/20200920/20129535BDsMk0f8s9.png
https://ithelp.ithome.com.tw/upload/images/20200920/20129535qMxLLlRvbK.png

圖片也是可以設超連結的,用 標籤把 包起來來就好。

<h1>圖片超連結</h1>
  <a href="./a1.html"><img width="500px" src="./images/0ws2YFTJcguqJ5hF1Hp3V8ELwZfAP_rMiLU2UYi1NlE.jpg" alt=""></a>

https://ithelp.ithome.com.tw/upload/images/20200920/20129535BIo5S6Qhgi.png

最後要注意的就是 ./ 代表這個檔案所在的目錄 ../ 退出一層資料夾 ../../ 退出兩層資料夾


上一篇
菜鳥網頁基礎 DAY9
下一篇
菜鳥網頁基礎 DAY11
系列文
菜鳥網頁基礎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言